<template>
  <div class="process-timeline">
    <el-timeline>
      <el-timeline-item
          v-for="(item, index) in processList"
          :key="index"
          :timestamp="item.timestamp"
          :placement="index % 2 === 0? 'top' : 'bottom'"
          :type="item.type"
      >
        <p>{{ item.status }}</p>
        <small>{{ item.description }}</small>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>

<script>
export default {
  data() {
    return {
      processList: [
        {
          timestamp: '2022-01-01 10:00:00',
          status: '订单已创建',
          description: '客户在平台上下单',
          type: ''
        },
        {
          timestamp: '2022-01-01 10:05:00',
          status: '商家已接单',
          description: '商家确认接收订单',
          type: ''
        },
        {
          timestamp: '2022-01-01 10:10:00',
          status: '商家准备商品',
          description: '商家开始准备客户所订商品',
          type: ''
        },
        {
          timestamp: '2022-01-01 10:20:00',
          status: '骑手已接单',
          description: '配送骑手接收订单',
          type: ''
        },
        {
          timestamp: '2022-01-01 10:25:00',
          status: '骑手前往商家',
          description: '骑手出发前往商家取货',
          type: ''
        },
        {
          timestamp: '2022-01-01 10:30:00',
          status: '骑手已取货',
          description: '骑手到达商家并取走商品',
          type: ''
        },
        {
          timestamp: '2022-01-01 10:40:00',
          status: '骑手配送中',
          description: '骑手在送往客户的途中',
          type: ''
        },
        {
          timestamp: '2022-01-01 10:50:00',
          status: '骑手已到达',
          description: '骑手到达客户指定地点',
          type: ''
        },
        {
          timestamp: '2022-01-01 10:55:00',
          status: '客户已收货',
          description: '客户接收商品，订单完成',
          type: ''
        },
        {
          timestamp: '2022-01-01 11:00:00',
          status: '订单评价',
          description: '客户可以对订单进行评价',
          type: ''
        }
      ]
    }
  }
}
</script>

<style scoped>
.process-timeline {
             width: 80%;
             margin: 0 auto;
           }
</style>
